<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }

    canvas {
        display: block;
        background: black;
    }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var data = {};
    var particleIndex = 0;
    var posX = w / 2;
    var posY = h / 2;
    var w, h;

    init();

    function init() {
        w = window.innerWidth;
        h = window.innerHeight;
        canvas.width = w;
        canvas.height = h;
    }
    window.onresize = init;



    function Particle() {
        particleIndex++;
        data[particleIndex] = this;
        this.x = posX;
        this.y = posY;
        this.r = 0;
        this.vx = random(-5, 5);
        this.vy = random(-5, 5);
        this.vr = (Math.abs(this.vx) + Math.abs(this.vy)) * 0.01;
        this.color = getColor();
        this.index = particleIndex;
    }

    Particle.prototype = {
        draw: function() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
            ctx.fillStyle = this.color;
            ctx.fill();
        },
        move: function() {
            if (this.x < 0 || this.x > w || this.y < 0 || this.y > h) {
                delete data[this.index];
            }
            this.x += this.vx;
            this.y += this.vy;
            this.r += this.vr;
            this.draw();
        }
    };
    createParticle();

    function createParticle() {
        requestAnimationFrame(createParticle);
        ctx.clearRect(0, 0, w, h);
        new Particle();
        for (var i in data) {
            data[i].move();
        }
    }

    document.onmousemove = function(e) {
        posX = e.offsetX;
        posY = e.offsetY;
    }


    function random(min, max) {
        return Math.random() * (max - min) + min;
    }

    function getColor() {
        return `rgb(${random(0,256)},${random(0,256)},${random(0,256)})`;
    }
    </script>
</body>

</html>